<template>
  <div>
    <Header></Header>
    <Nav></Nav>
    <div class="content" v-for="(hd, index) in hotJob_detail">
      <p class="title">诚招</p>
      <p><span class="garden">单位：{{ hd.garden }}</span></p>
      <p><span>单位介绍：{{ hd.garden_troduction }}</span></p>
      <p><span>招聘职位：{{ hd.job }}</span></p>
      <p><span>职位要求及要求：{{ hd.job_troduction }}</span></p>
      <p><span>薪资待遇：{{ hd.salsry }}</span></p>
      <p><button class="btn" @click="join(index)">加入我们吧</button></p>
    </div>
    <Dialog :dialog="dialog" :ad="tojob" :tg="togarden"></Dialog>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/header.vue'
import Nav from '../components/nav.vue'
import Footer from '../components/footer.vue'
import eventBus from '../views/eventBus'
import Dialog from '../components/dialog.vue'

export default {
  name: 'personal',
  components: {
    Header,
    Nav,
    Footer,
    Dialog
  },
  data() {
    return {
      dialog: {
        show: false
      },
      hotJob_detail: [],
      tojob: [],
      togarden: [],
    };
  },
  created() {

  },
  mounted() {
    eventBus.$on('hotJob_detail', item => {
      this.hotJob_detail = item
      console.log(this.hotJob_detail.garden)
    })
  },
  methods: {
    join(index) {
      // alert('请填写个人信息及介绍')
      this.dialog.show = true
      this.tojob = this.hotJob_detail[index].job
      this.togarden = this.hotJob_detail[index].garden
    }
  }
}
</script>

<style scoped>
.title {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

.content {
  margin-left: 318px;
  margin-right: 352px;
  margin-top: 50px;
  margin-bottom: 50px;
  font-size: 20px;
  background-color: firebrick;
}

.btn {
  margin-left: 291px;
  margin-bottom: 10px;
  height: 39px;
  border-radius: 10px 10px;
  border: none;
  background-color: white;
  color: firebrick;
}
</style>
